fe5-3:事件机制和事件绑定

一、操作元素(创建, 删除, 修改)
二、事件

// 一、
// 创建
// 用 document.createElement 函数创建一个元素
var button = document.createElement('button');
// 用 innerHTML 设置属性
button.innerHTML = '注册用户'

// 修改
// 用 appendChild 给一个元素添加子元素
// 这里给 .login-form 添加刚才创建好的按钮
var form = document.querySelector('.login-form')
form.appendChild(button)

// 删除
var pwd = document.querySelector('#id-input-password')
// 以下两种方法都可以删除元素
// 一种是自毁
// 一种是父节点删除子元素
pwd.remove()
form.removeChild(pwd)

// 二、
// 点击事件
//  获得按钮
var loginButton = document.querySelector('#id-button-login')
// 声明一个函数, 用于在按钮点击后执行
var clicked = function(event) {
    log('按钮被点击到了', event)
}
// 添加事件, 使用 addEventListener 函数, 它有两个参数
loginButton.addEventListener('click', clicked)
// 第一个是事件的名字, 第二个是事件发生后会被自动调用的函数
// loginButton 发生了 'click' 事件后调用 clicked 函数